<%@ page language="java" contentType="text/html; charset=utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Insert title here</title>
<link rel="stylesheet" href="js/resources/css/ext-all.css"
	type="text/css"></link>
<script type="text/javascript" src="js/ext-all-debug.js"></script>
<!-- 
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
 -->
<script type="text/javascript">
	Ext.require([ 'Ext.tree.*', 'Ext.data.*', 'Ext.tip.*' ]);

	Ext.onReady(function() {
		Ext.QuickTips.init();

		var store = Ext.create('Ext.data.TreeStore', {
			proxy : {
				type : 'ajax',
				url : 'treegrid.json'
			},
			root : {
				text : 'Ext JS',
				id : 'src',
				expanded : true
			},
			folderSort : true,
			sorters : [ {
				property : 'text',
				direction : 'ASC'
			} ]
		});

		var tree = Ext.create('Ext.tree.Panel', {
			store : store,
			viewConfig : {
				plugins : {
					ptype : 'treeviewdragdrop'
				}
			},
			renderTo : 'tree-div',
			height : 300,
			width : 250,
			title : 'Files',
			useArrows : true,
			dockedItems : [ {
				xtype : 'toolbar',
				items : [ {
					text : 'Expand All',
					handler : function() {
						tree.getEl().mask('Expanding tree...');
						var toolbar = this.up('toolbar');
						toolbar.disable();

						tree.expandAll(function() {
							tree.getEl().unmask();
							toolbar.enable();
						});
					}
				}, {
					text : 'Collapse All',
					handler : function() {
						var toolbar = this.up('toolbar');
						toolbar.disable();

						tree.collapseAll(function() {
							toolbar.enable();
						});
					}
				} ]
			} ]
		});
	});
</script>
</head>
<body>
	<div id="tree-div"></div>
</body>
</html>